<template>
  <div class="time-select">
    <div :class="[currentValue === item.name ? 'selected' : '', 'time-btn']"
      v-for="(item, index) in btn" :key="index" @click="select(item)">{{item.alias}}</div>
  </div>
</template>

<script>
import Config from '../config'
import moment from 'moment'
export default {
  name: 'timeSelect',
  data () {
    return {
      time: null,
      currentValue: 'week',
      btn: [
        {
          name: 'week',
          alias: '近一周',
          day: {
            start: moment(this.time).subtract('days', 6).valueOf(),
            end: moment(this.time).subtract('days', 0).valueOf()
          }
        },
        {
          name: 'month',
          alias: '近一月',
          day: {
            start: moment(this.time).subtract('days', 29).valueOf(),
            end: moment(this.time).subtract('days', 0).valueOf()
          }
        },
        {
          name: 'halfYear',
          alias: '近半年',
          day: {
            start: moment(this.time).subtract('days', 179).valueOf(),
            end: moment(this.time).subtract('days', 0).valueOf()
          }
        },
        {
          name: 'year',
          alias: '近一年',
          day: {
            start: moment(this.time).subtract('days', 364).valueOf(),
            end: moment(this.time).subtract('days', 0).valueOf()
          }
        }
      ]
    }
  },
  methods: {
    select (item) {
      this.currentValue = item.name
      this.$emit('change', item)
    },
    ts() {
      let url = `${Config.FIREPLUG_APP_URL}/fireplug/ts`
      this.$http.get(url).then((res) => {
        this.time = res
        this.$emit('change', this.btn[0])
      })
    }
  },
  mounted() {
    this.ts()
  }
}
</script>

<style lang="scss" scoped>
  .time-select {
    height: 30px;
    display: inline-flex;
    align-items: stretch;
    justify-content: start;
    .time-btn {
      width: 76px;
      background-color: #fff;
      color: #999;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-right: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      border-top: 1px solid #f5f5f5;
    }
    .time-btn:first-child {
      border-radius: 15px 0 0 15px;
      border-left: 1px solid #f5f5f5;
    }
    .time-btn:last-child {
      border-radius: 0 15px 15px 0;
    }
    .time-btn:hover {
      background-color: #ff5858;
      color: #fff;
      cursor: pointer;
    }
    .time-btn:active{
      background-color: #e03131;
    }
    .selected {
      background-color: #eb3838;
      color: #fff;
    }
  }
</style>
